<!--  -->
<template>
  <div>
    <el-card>
    <span>reserve</span>
    <!-- 房间号 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="房间号" prop="roomNo">
        <el-select v-model="form.roomNo" placeholder="请选择会议室房间号">
          <el-option label="601" value="601"></el-option>
          <el-option label="602" value="602"></el-option>
          <el-option label="603" value="603"></el-option>
          <el-option label="604" value="604"></el-option>
          <el-option label="605" value="605"></el-option>
        </el-select>
      </el-form-item>
      <!-- 开始时间 -->
      <el-form-item label="开始时间" prop="startTime">
        <el-select v-model="form.startTime" placeholder="请选择会议开始时间">
          <el-option label="8:00" value="8"></el-option>
          <el-option label="9:00" value="9"></el-option>
          <el-option label="10:00" value="10"></el-option>
          <el-option label="11:00" value="11"></el-option>
          <el-option label="12:00" value="12"></el-option>
          <el-option label="13:00" value="13"></el-option>
          <el-option label="14:00" value="14"></el-option>
          <el-option label="15:00" value="15"></el-option>
          <el-option label="16:00" value="16"></el-option>
          <el-option label="17:00" value="17"></el-option>
          <el-option label="18:00" value="18"></el-option>
          <el-option label="19:00" value="19"></el-option>
        </el-select>
      </el-form-item>
      <!-- 结束时间 -->
      <el-form-item label="结束时间" prop="endTime">
        <el-select v-model="form.endTime" placeholder="请选择会议结束时间">
          <el-option label="9:00" value="9"></el-option>
          <el-option label="10:00" value="10"></el-option>
          <el-option label="11:00" value="11"></el-option>
          <el-option label="12:00" value="12"></el-option>
          <el-option label="13:00" value="13"></el-option>
          <el-option label="14:00" value="14"></el-option>
          <el-option label="15:00" value="15"></el-option>
          <el-option label="16:00" value="16"></el-option>
          <el-option label="17:00" value="17"></el-option>
          <el-option label="18:00" value="18"></el-option>
          <el-option label="19:00" value="19"></el-option>
          <el-option label="20:00" value="20"></el-option>
        </el-select>
      </el-form-item>

      <!-- 选择日期 -->
      <el-form-item label="预约日期" prop="date">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="{
              disabledDate: (t) => t.getTime() < Date.now() - 3600 * 1000 * 24,
            }"
            v-model="form.date"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
      </el-form-item>
      <!-- 周期预约 -->
      <el-form-item label="周期预约">
        <el-switch
          v-model="form.lx"
          active-value="true"
          inactive-value="false"
          @change="s"
        ></el-switch>
      </el-form-item>
      <!-- 周期预约 -->
      <div v-if="show">
        <el-form-item label="持续周期" prop="endDate">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.endDate"
              value-format="yyyy-MM-dd"
              :picker-options="{
                disabledDate: (t) =>
                  t.getTime() < Date.now() - 3600 * 1000 * 24,
              }"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="s">取消</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var timec = () => {
      return this.form.startTime >= this.form.endTime;
    };
    return {
      rules: {
        roomNo: [{ required: true, message: "此项不能为空", trigger: "blur" }],
        startTime: [
          { required: true, message: "此项不能为空", trigger: "blur" },
        ],
        endTime: [{ required: true, message: "此项不能为空", trigger: "blur" }],
        date:[{ required: true, message: "此项不能为空", trigger: "blur" }],
        endDate:[{required: true, message: "此项不能为空", trigger: "blur"}]
      },
      show: false,
      //提交对象
      form: {
        //会议室
        roomNo: "",
        //开始时间
        startTime: "",
        //结束时间
        endTime: "",
        //是否连续预约
        lx: false,
        //预约日期
        date: "",
        //连续结束日期
        endDate: "",
        //用户id，seesion获取
        userId: "",
      },

      flag: false,
    };
  },

  components: {},

  methods: {
    //判断是否为null或者undefined
    check() {
      console.log(this.form);
      const isnameno = this.form.roomNo === "";
      const isstartime = this.form.startTime === "";
      const isendtime = this.form.endTime === "";

      const isdate = this.form.date === "";

      let is = isnameno || isstartime || isendtime || isdate;

      if (is) {
        this.$message.error("请完善填写");
        return true;
      }
    },
    //提交表单
    async onSubmit() {
      if (this.check()) {
        return;
      }
      // if (this.form.endTime <= this.form.startTime) {
      //   this.$message.error("请改正结束时间");
      //   return;
      // }
      // if(this.form.endDate !=''){
      //     if (this.form.endDate <= this.form.date) {
      //   this.$message.error("请改正结束日期");
      //   return;
      // }
      // }
    

      console.log(this.form.roomNo);
      console.log(this.form.startTime);
      console.log(this.form.endTime);
      console.log(this.form.date);
      console.log(this.form.lx);
      console.log(this.form.endDate);
       if (!this.flag) {
        const { data: res } = await this.axios.post("qwe", this.form);
        if (res.flag == 'false') {
          return this.$message.error("对不起，预约失败了");
        } else {
         
          return this.$message.success("预约成功");
        }
      }

      console.log(res.data);
    },
    async s() {
      this.show = !this.show;
    },
    //   获取用户id
      getuserid() {
      let user = window.localStorage.getItem("access-token");
      const user1 = JSON.parse(user);
      console.log(user1);
      this.form.userId = user1.userid;
      console.log(user1.userid);
    },
  },
  //  create额
  created() {
    this.getuserid();
    // this.$forceUpdate();
  },
};
</script>
<style >
</style>